<template>
  <div class="product-settings pd-20">
    <el-button type="primary"
               @click="handleOption('add', null)">新 增</el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize">

      <template v-slot:option="{row}">
        <el-button type="warning"
                   @click="handleOption('details', row)">详 情</el-button>
        <el-button type="danger"
                   @click="handleOption('del', row)">删 除</el-button>
        <el-button type="info"
                   @click="handleOption('isShelves', row)">
          <span v-if="row.status === 1"
                class="el-icon-download">下架</span>
          <span v-if="row.status === 0"
                class="el-icon-upload2">上架</span>
        </el-button>
        <el-button type="success"
                   @click="handleOption('edit', row)">编 辑</el-button>
      </template>
      <template v-slot:status="{row}">
        <span v-if="row.status === 1"
              class="curr-status">上 架</span>
        <span v-if="row.status === 0"
              class="curr-status">下 架</span>
      </template>
    </element-table>
    <product-dialog :productObj="productObj"
                    v-if="isShowDialog"
                    :getList="getList"
                    :isDetail="isDetail"
                    :visible.sync="isShowDialog"></product-dialog>
  </div>
</template>
<script>
  import elementTable from '@/base/ElementTable'
  import setProductDialog from './addProductSet'
  export default {
    name: 'productSettings',
    data () {
      return {
        tableData: [],
        columns: [
          {
            label: '产品包名称',
            prop: 'productName',
            showToolTip: true
          },
          {
            label: '价格(元)',
            prop: 'price'
          },
          {
            label: '上架时间',
            prop: 'upTime',
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.upTime), 'yyyy-MM-dd hh:mm:ss')
            }
          },
          {
            label: '当前状态',
            prop: 'status',
            isSlot: true
          },
          {
            label: '操作',
            prop: 'option',
            isSlot: true
          }
        ],
        pageTotal: 0,
        pageIndex: 0,
        pageSize: 20,
        isShowDialog: false,
        isDetail: false, // 查看详情
        productObj: {}
      }
    },
    methods: {
      async getList () {
        const { data: res } = await this.post(this.api.ECG.getProductList, {
          status: null
        })
        if (res.code === '200') {
          this.tableData = res.object
        } else {
          this.$message.error(res.message)
        }
      },
      // 操作
      async handleOption (op, row) {
        this.productObj = row
        this.isDetail = false
        switch (op) {
          case 'details':
            this.isShowDialog = true
            this.isDetail = true
            break
          case 'add':
            this.isShowDialog = true
            break
          case 'del':
            this.$confirm('确认关闭？')
              .then(async _ => {
                const { data: result } = await this.post(this.api.ECG.delProduct, {
                  id: row.id,
                })
                if (result.code === '200') {
                  this.$message.success('删除成功')
                  this.getList()
                } else {
                  this.$message.error(this.message)
                }
              })
              .catch(_ => { });
            break
          case 'isShelves':
            const { data: resData } = await this.post(this.api.ECG.setProductShelves, {
              id: row.id,
              upOrDown: row.status === 0 ? 1 : 0
            })
            if (resData.code === '200') {
              this.getList()
            } else {
              this.$message.error(resData.message)
            }

            break
          case 'edit':
            this.isShowDialog = true
            break
        }
      }
    },
    created () {
      this.getList()

    },
    components: {
      'element-table': elementTable,
      'product-dialog': setProductDialog,
    }
  }
</script>
<style scoped lang="scss">
  .curr-status {
    color: #f56c6c;
    font-weight: bold;
  }
</style>